<template>
  <div>
    <div class="inputBox">
      <el-input
        class="addInput"
        placeholder="请输入...">

      </el-input>
      <el-button size="small" @click="doAdd" type="primary" icon="el-icon-plus">添加</el-button>
    </div>
    <div>
      <el-table stripe border :data="list" class="table">
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="study"
          label="学习科目"
          width="180">
        </el-table-column>
        <el-table-column
          prop="time"
          label="学习周期"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="doTransmit(scope.row)">传递</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 儿子组件 -->
      <child-view :is-show="isShow" :row="row" />
    </div>
  </div>
</template>

<script>
import ChildView from './comp/ChildView.vue'
export default {
  name: 'SysConfig',
  components: {
    ChildView
  },
  data () {
    return {
      list: [
        {
          name: '张三',
          sex: '男',
          xueli: '专科',
          study: 'java',
          time: '6个月'
        },
        {
          name: '李四',
          sex: '男',
          xueli: '专科',
          study: 'python',
          time: '8个月'
        }
      ],
      isShow: false,
      row: {}
    }
  },
  methods: {
    doAdd () {},
    doTransmit (row) {
      this.isShow = true
      this.row = row
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .table {
  margin: 16px;
}
.addInput {
  width: 380px !important;
}
/deep/ .el-table {
  width: none;
}
.inputBox {
  border: 1px solid #EBEEF5;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  margin: 16px 16px 0px 16px;
}
</style>